/**
 * $(document).ready 的作用是等页面的的文档（document）中的节点都加载完毕后，再执行后续的代码
 */
jQuery(document).ready(function () {

    $(".collect").click(function () {
        /**
         * 把 collect 元素转化成jQuery的对象 press
         */
        var press = $(this); //得到这个标签的对象
        /**
         * <a href="javascript:;" class="collect"><span class=""></span><em>Test</em></a>
         * javascript:;和javascript:void(0);的没有区别？
         * 这句话的意思：获取 collect 元素下的子元素 i 的值
         *
         * html()获取集合中第一个匹配元素的HTMl内容
         * 1.html() 不传值，就是获取集合中第一个匹配元素的内容
         * 2.html(htmlString) 设置每一个匹配元素的html内容
         * 3.html(function(index,oldhtml)) 用来返回设置HTML内容的一个函数
         */
        var id = press.children('i').html(); //

        //通过Ajax请求发送数据
        $.ajax({
            url: "site/index", //用来处理这个请求的地址
            data: {
                id: id 	//将id这个数据发送过去
            },
            type: 'post',	 //发送方式
            cache: false,		//是否缓存，
            dataType: 'json', //以json格式数据来发送
            success: function (data) {
                //成功的话，返回一个数据
                if (data.status == 1) {
                    console.log(data); //console.log() 用来输入普通的信息
                    /**
                     * 移除collect元素下的span元素的class，再添加一个class，并且设置css样式
                     */
                    press.children('span').removeClass("glyphicon-heart").addClass("glyphicon-heart-empty").css('color', 'black');
                    /**
                     * 设置collect元素下的em标签的值为：收藏，并且设置了css样式
                     */
                    press.children('em').html("收藏").css('color', 'red');
                } else if (data.status == 0) {
                    console.log(data);
                    press.children('span').removeClass('glyphicon-heart-empty').addClass('glyphicon-heart').css('color', 'black');
                    press.children('em').html("已收藏").css('color', 'red');
                } else if (data.status == -1) {
                    /**
                     * 其他的条件，比如没有登录，则加载一个Bootstrap模态对话框
                     * .modal，用来把 <div>的内容识别为模态框
                     * .modal('show') 手动打开核态框
                     *
                     * >>>更多关于 Bootstrap 的内容请看 bootstrap.php
                     */
                    $("#myModel").modal('show');
                }
            },
            error: function () {
                console.log("收藏异常");
            }
        });
    });

    /**
     * 点击评论按钮：<?= Html::button("提交", ['class'=>'btn btn-success btn-block', 'id'=>'comment-btn']) ?>
     * 获取输入框内容：<?php $form = \yii\widgets\ActiveForm::begin(['id' => 'comment-form'])?>
     * 打开模态对话框：<?php Modal::begin(['header'=>'<p>标题</p>', 'id'=>'anonymous-dialog', 'size'=>Modal::SIZE_SMALL,]) ?>
     */
    jQuery("#comment-btn").click(function () {
        jQuery.ajax({
            url: "comment/index",
            /**
             * serialize()序列化表单的内容为字符串，使之能够在一个Ajax请求中发送
             */
            data: jQuery("#comment-form").serialize(),
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.status == 1) {
                    //重新加载
                    document.location.reload();
                } else if (data.status == 0) {
                    //手动打开一个模态对话框
                    $("#anonymous-dialog").modal('show');
                } else if (data.status == -1) {
                    alert(data.msg);
                }
            },
            error: function () {
                console.log("comment failed, please try again later.");
            }
        });
    });

    /**
     * 隐藏需要隐藏的地方，找好class进行处理即可
     * <a href="javascript:;" class="zhedie"><img .../></a>
     */
    $("[class = zhidie]").click(function () {
        var parent = $(this).parent().parent().parent();

        parent.find(".comment-bottom").toggleClass("hide");
        parent.find(".content").toggleClass("hide");
        parent.find(".media-left0").toggleClass("hide");

        var child = parent.children(".comment-box");
        if (child) {
            child.toggleClass("hide");
        }
    });

    $("[id = comment-report]").click(function () {
        //.modal('toggle') 手动切换一个模态框
        $("#reportCommentModal").modal('toggle');
        var press = $(this);
        var id = press.children('i').html();
        $(".comment_report_id").val(id);

        $(".comment-btn").click(function () {
            $.ajax({
                url: 'comment/report',
                data: $("#comment-form").serialize(),
                dataType: 'json',
                type: 'post',
                cache: false,
                success: function (data) {
                    console.log(data);
                    if (data.status == 1) {
                        $("#reportCommentModal").modal("hide");
                    } else if (data.status == 2) {
                        $("#reportCommentModal").modal("hide");
                    }
                },
                error: function () {
                    console.log("Throw Exception...");
                }
            });
        });
    });

    $(".signin").click(function () {
        var press = $(this);
        $.ajax({
            url: 'site/signin',
            type: 'post',
            dataType: 'json',
            cache: false,
            success: function (data) {
                if (data.status == 1) {
                    press.removeClass("btn-info").removeClass("signin").addClass("btn-danger");
                    press.children("span").html("今天已签到");
                } else if (data.status == 2) {
                    console.log(data);
                }
            },
            error: function () {
                console.log("签到异常");
            }
        });
    });
});